<template>
  <table class="form-field"
         :class="{'form-field-no-validate':!validate}">
    <tr v-for="(row,rowIndex) in fieldRows"
        :key="rowIndex">
      <template v-for="(field,fieldIndex) in row"
                v-if="field && field.code">
        <th class="field-label"
            :width="labelWidth"
            v-if="hasLabel">
          <label :class="{reuqire:field.required && validate}">
            {{ field.name}}
          </label>
        </th>
        <td :colspan="field.type==='memo' && hasFullRow ?formCol*2-1:1">
          <component @enter="inputEnter"
                     :size="controlSize"
                     :search-mode="searchMode"
                     :row-length="fieldRows.length"
                     :rowIndex="fieldIndex"
                     @extInput="extFieldInput($event)"
                     :ref="'field_'+field.code"
                     @validate="fieldValidate(field,$event)"
                     :validator="formValidte"
                     :forceEnable="allEnable"
                     :model="field"
                     :hasValidate="validate"
                     :require="field.require"
                     @change="dataChange"
                     :is="fieldControl(field)"
                     :value="formData[field.code]"
                     @input="fieldInput(field,$event)"
                     :rowData="formData"
                     :status="fieldStatus[field.code]"></component>
        </td>
        </teonent @extInput="extFieldInput($event)"
                  :ref="'field_'+field.code"
                  @validate="fieldValidate(field,$event)"
                  :validator="formValidte"
                  :forceEnable="allEnable"
                  :model="field"
                  :hasValidate="validate"
                  :require="field.require"
                  @change="dataChange"
                  :is="fieldControl(field)"
                  :value="formData[field.code]"
                  @input="fieldInput(field,$event)"
                  :rowData="formData"
                  :status="fieldStatus[field.code]">
        </component>
        </td>
      </template>
    </tr>
  </table>
</template>

<script>
import BaseForm from './form';
import moduleStore from 'store/type/form';
export default {
	mixins: [BaseForm],
	moduleStore,
	props: {
		labelWidth: {
			default: 'auto',
		},
		enableColCount: {
			default: false,
		},
		hasLabel: {
			default: true,
		},
	},
	data() {
		return {
			spanFields: {},
		};
	},
	watch: {
		spanFields(v) {
			console.log(1, v);
		},
	},
	computed: {
		hasTextTip() {
			return false;
		},
		fieldRows() {
			//数据行分组
			var model = this.moduleState.formModel;
			var fieldRows = [];
			if (!model) return [];
			var fieldCount = 0;
			var rowSet = [];
			this.formFields;
			for (var i in this.formFields) {
				if (fieldCount === this.formCol) {
					fieldCount = 0;
					fieldRows.push(rowSet);
					rowSet = [];
				}
				if (
					(this.formFields[i].type !== 'memo' || !this.hasFullRow) &&
					!this.spanFields[this.formFields[i].code]
				) {
					rowSet.push(this.formFields[i]);
					fieldCount++;
				} else {
					if (fieldCount) {
						fieldRows.push(rowSet);
					}
					fieldRows.push([this.formFields[i]]);
					rowSet = [];
					fieldCount = 0;
				}
			}
			if (rowSet.length) {
				fieldRows.push(rowSet);
			}
			return fieldRows;
		},
	},
};
</script>

<style lang="less">
table.form-field {
	width: 100%;
	td,
	th {
		padding: 2px 0 2px 4px;
		vertical-align: top;
		.ivu-date-picker {
			min-width: 160px;
		}
		&.field-label {
			padding: 0 0 0 6px;
		}
	}
	td {
		min-width: 100px;
		max-width: 280px;
	}
	th {
		padding-left: 8px;
		vertical-align: top;
		text-align: right;
		padding-right: 16px;
		line-height: 33px;
		white-space: nowrap;
	}
}
</style>
